<template>
   <div id="container">
    <h1>modal组件封装练习</h1>
    <modal :visible="visible" @on-cancel="cancel" @on-confirm="confirm"></modal>
    <!-- 容器父组件给子组件传递了一个visible的值，visible的值在下面data里面声明 这个visible用来控制显示和隐藏  两个自定义的按钮事件 值cancel和confirm都是自定义的值 都是在下面methods里面设置-->
    <button @click="showModal" >点击显示模态框</button>
    <!-- 给按钮绑定事件，里面的showModal在下面的methods里面添加  -->
   </div>
</template>


<script>
import modal from "../../../components/modal/index" //导入组件
export default {
    components: {//所有导入的组件都要来这里面进行注册
        modal
    },
    data(){
        return {
            visible:false//这里设置visible的值一开始就是false
        }
    },
    methods:{//这里面写方法
        showModal(){//这个就是点击后设置把visible的值变成true，就是点击后让模态框显示
            this.visible=true;
        },
        //模态框点击确定按钮的处理函数
        cancel(){
            this.visible=false;
            alert('已经取消')
        },
        //模态框点击取消按钮触发的事件处理函数
        confirm(){
            this.visible=false;
            alert('已经支付')
        }
    }
}
</script>